<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>02</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="vue.js"></script>
<style type="text/css" media="screen">
body {
    font-size: 24px;
}

button {
    width: 80px;
    height: 45px;
    font-size: 20px;
}

.active {
    color: red;
}

.big {
    font-weight: bolder;
    font-size: 64px;
}

.border1 {
    border: 1px solid gray;
}
	
</style>
</head>
<body>
    <div id="myApp">
        <h3>游戏列表</h3>
        <!-- Virtual DOM -->
        <div v-if="seen">2017最新发卖</div>
        <ol>
            <li v-for="game1 in games">{{game1.title}} / {{game1.price}}元</li>
        </ol>
    </div>
    <script>
        var myApp = new Vue({
            el: '#myApp'
            , data: {
                seen: true,
                games: [
                    {
                        title: '勇者斗恶龙'
                        , price: 400
                    }
                    , {
                        title: '超级马里奥'
                        , price: 380
                    }
                    , {
                        title: '我的世界'
                        , price: 99
                    }
            , ]
            , }
        , });
    </script>
</body>
</html>